<template>
   <div class="dept-detail-container">
      <h1 class="dept-title">部门详情</h1>
      <div class="dept-info-card">
         <div class="info-item">
            <span class="info-label">ID:</span>
            <span class="info-value">{{ state.deptinfo.id }}</span>
         </div>
         <div class="info-item">
            <span class="info-label">部门名称:</span>
            <span class="info-value">{{ state.deptinfo.name }}</span>
         </div>
         <div class="info-item">
            <span class="info-label">部门负责人:</span>
            <span class="info-value">{{ state.deptinfo.principal }}</span>
         </div>
         <div class="info-item">
            <span class="info-label">负责人电话:</span>
            <span class="info-value">{{ state.deptinfo.principal_tel }}</span>
         </div>
         <div class="info-item">
            <span class="info-label">部门电话:</span>
            <span class="info-value">{{ state.deptinfo.tel }}</span>
         </div>
      </div>
      <button class="back-button" @click="goBack">返回</button>
   </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { onMounted, inject, reactive } from 'vue'
const router = useRouter()
const route = useRoute()
//axios 对象
const $http = inject('$http')

const state = reactive({
   deptinfo: {},
})
onMounted(() => {
   getDeptinfo()
})
const goBack = () => {
   router.push('/home')
}
const getDeptinfo = async () => {
   const result = await $http.get(`/dep/${route.params.id}`);
   state.deptinfo = result.data.data;
   console.log(result.data.data);
}
</script>

<style scoped>
.dept-detail-container {
   width: 800px;
   margin: 0 auto;
   padding: 20px;
}

.dept-title {
   margin-bottom: 30px;
}

.dept-info-card {
   background-color:#ddd;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   padding: 25px;
   margin-bottom: 30px;
}

.info-item {
   display: flex;
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eee;
}

.info-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.info-label {
   font-weight: bold;
   width: 120px;
}

.back-button {
   display: block;
   width: 150px;
   margin: 0 auto;
   background-color:#ddd;
   color: black;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
   font-weight: bold;
}
</style>